<section class="one-start" style="background: #ecf0f5;margin: -10px;">
  <div class="row">
    <div class="col-md-12">
      <div class="one-set-bg one-content-top">
        <div class="one-text-large">{{start.regionName}}</div>
        <div class="one-text-link-line"></div>
        <div class="pull-right">更新时间 : <span class="realTime">{{start.monitorTime}}</span></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-7" style="padding:0;">
      <div class="row">
        <div class="col-md-5">
          <div class="one-set-bg one-content-right">
            <ul class="one-now-weather">
              <li class="text-center">
                <p class="one-temperature-icon">温度</p>
                <p>{{start.temperature}}&deg;C</p>
              </li>
              <li class="text-center">
                <p class="one-humidity-icon">湿度</p>
                <p>{{start.humidity}}%</p>
              </li>
              <li class="text-center">
                <p class="one-wind-icon">风向</p>
                <p>{{start.windDirect}}{{start.windSpeed}}级</p>
              </li>
            </ul>
            <div class="one-AQI-now">
              <div id="dayAQIChart" style="width:150px;height:145px;margin: 0 auto;"></div>
              <div class="one-data-warning"></div>
            </div>
          </div>
        </div>
        <div class="col-md-7">
          <div class="one-set-bg one-content-right">
            <div class="one-text-big one-title-bg" style="margin-bottom: 2px;">当日累计AQI</div>
            <div id="conutAQIChart" style="width: 100%;height: 120px;"></div>
          </div>
        </div>
        <div class="col-md-12" style="padding: 6px 5px 0 10px;">
          <div class="one-set-bg one-content-right-bottom">
            <ul class="list-inline">
              <li class="text-center">
                <ul class="list-unstyled one-AQI-PM25">
                  <li class="one-bg-level{{start.pm25Level}}">PM2.5</li>
                  <li>{{start.pm25}}</li>
                </ul>
              </li>
              <li class="text-center">
                <ul class="list-unstyled one-AQI-PM10">
                  <li class="one-bg-level{{start.pm10Level}}">PM10</li>
                  <li>{{start.pm10}}</li>
                </ul>
              </li>
              <li class="text-center">
                <ul class="list-unstyled one-AQI-SO2">
                  <li class="one-bg-level{{start.so2Level}}">SO2</li>
                  <li>{{start.so2}}</li>
                </ul>
              </li>
              <li class="text-center">
                <ul class="list-unstyled one-AQI-NO2">
                  <li class="one-bg-level{{start.no2Level}}">NO2</li>
                  <li>{{start.no2}}</li>
                </ul>
              </li>
              <li class="text-center">
                <ul class="list-unstyled one-AQI-CO">
                  <li class="one-bg-level{{start.coLevel}}">CO</li>
                  <li>{{start.co}}</li>
                </ul>
              </li>
              <li class="text-center">
                <ul class="list-unstyled one-AQI-O3">
                  <li class="one-bg-level{{start.o3Level}}">O3</li>
                  <li>{{start.o3}}</li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-5">
      <div class="one-set-bg one-content-left">
        <div class="one-text-big one-title-bg">排名情况</div>
        <div class="one-btn-container">
          <div class="btn-group rankingTableBtn">

          </div>
        </div>
        <ul class="one-ranking-list">
          <li class="text-center one-null-content"></li>
          <li class="text-center">日排名</li>
          <li class="text-center">月排名</li>
          <li class="text-center">年排名</li>
        </ul>
        <ul class="one-ranking-list rankingData">

        </ul>
        <ul class="one-ranking-list changeData">

        </ul>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-7">
      <div class="one-set-bg"  style="height: 240px;">
        <div class="one-text-big one-title-bg">未来五天预报</div>
        <ul class="one-list-inline-weather one-weather-forecast">
          <li class="text-center" *ngFor = "let data of start.weatherList">
            <p>{{data.date}}</p>
            <!--<p><span class="one-bg-level2">78</span></p>-->
            <p>{{data.cond.cond_d}}</p>
            <p [class]="data.imgClass"></p>
            <p>{{data.tmp.min}}-{{data.tmp.max}}&deg;C</p>
            <p>{{data.wind.dir}}</p>
            <p>{{data.wind.sc}}</p>
          </li>
          <li *ngIf = "start.realWeatherMessage">{{start.realWeatherMessage}}</li>
        </ul>
      </div>
    </div>
    <div class="col-md-5">
      <div class="one-set-bg" style="height: 240px;">
        <div class="one-text-big one-title-bg">空气质量目标年度考核</div>
        <div class="one-annualcontent-left">
          <div id="annualTargetChart" style="width:180px;height: 180px;margin: 0 auto;"></div>
        </div>
        <div class="one-annualcontent-right">
          <div style="height:180px">
            <div class="one-progress-bar-bg">
              <div class="one-progress-bar pm10Goal" [style.height]="start.pm10GoalGoalHeight">
                <div class="one-progress-bar-text">
                  <p>目标</p>
                  <p>{{start.pm10GoalGoal}}</p>
                </div>
              </div>
              <div class="{{start.pm10GoalClassName}} pm10Done" [style.height]="start.pm10GoalDoneHeight">
                <div class="one-progress-bar-text">
                  <p>现状</p>
                  <p>{{start.pm10GoalDone}}</p>
                </div>
              </div>
              <div class="one-progress-title">PM10</div>
            </div>
            <div class="one-progress-bar-bg">
              <div class="one-progress-bar pm25Goal"  [style.height]="start.pm25GoalGoalHeight">
                <div class="one-progress-bar-text" >
                  <p>目标</p>
                  <p>{{start.pm25GoalGoal}}</p>
                </div>
              </div>
              <div class="{{start.pm25GoalClassName}} pm25Done"  [style.height]="start.pm25GoalDoneHeight">
                <div class="one-progress-bar-text">
                  <p>现状</p>
                  <p>{{start.pm25GoalDone}}</p>
                </div>
              </div>
              <div class="one-progress-title">PM2.5</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="one-set-bg" style="height:300px;">
        <div class="one-btn-container chart-btn">
          <div class="btn-group">
            <!--<div class="btn btn-default">办事处排名</div>-->
            <!--<div class="btn btn-default active">市区排名</div>-->
            <!--<div class="btn btn-default">郊县排名</div>-->
          </div>
        </div>
        <div class="one-ranking-title">
          <div class="pull-left">当日累计综合指数</div>
          <!--<div class="pull-right"><div class="one-ranking-img active"></div></div>-->
        </div>
        <div class="one-chart-container">
          <div id="cityDataChart" style="height:220px;"></div>
          <div id="outskirtsDataChart" style="height:220px;"></div>
        </div>
        <!--<div id="rankingList" class="row"  style="display:none;">-->
        <!--<div class="one-content-inline col-md-6">-->
        <!--<div class="one-bg-level4">1</div>-->
        <!--<div class="one-content-inline-text">经开区</div>-->
        <!--<div class="one-progress-ranking one-progress-ranking-bg" title="167"></div>-->
        <!--<div>167</div>-->
        <!--</div>-->
        <!--<div class="one-content-inline col-md-6">-->
        <!--<div class="one-bg-level4">2</div>-->
        <!--<div class="one-content-inline-text">中原区</div>-->
        <!--<div class="one-progress-ranking one-progress-ranking-bg" style="width:50%;" title="158"></div>-->
        <!--<div>158</div>-->
        <!--</div>-->
        <!--<div class="one-content-inline col-md-6">-->
        <!--<div class="one-bg-level4">3</div>-->
        <!--<div class="one-content-inline-text">高新区</div>-->
        <!--<div class="one-progress-ranking one-progress-ranking-bg" style="width:45%;" title="155"></div>-->
        <!--<div>155</div>-->
        <!--</div>-->
        <!--<div class="one-content-inline col-md-6">-->
        <!--<div class="one-bg-level3">4</div>-->
        <!--<div class="one-content-inline-text">惠济区</div>-->
        <!--<div class="one-progress-ranking one-progress-ranking-bg"  style="width:40%;" title="142"></div>-->
        <!--<div>142</div>-->
        <!--</div>-->
        <!--<div class="one-content-inline col-md-6">-->
        <!--<div class="one-bg-level3">5</div>-->
        <!--<div class="one-content-inline-text">金水区</div>-->
        <!--<div class="one-progress-ranking one-progress-ranking-bg"  style="width:35%;" title="132"></div>-->
        <!--<div>132</div>-->
        <!--</div>-->
        <!--<div class="one-content-inline col-md-6">-->
        <!--<div class="one-bg-level3">6</div>-->
        <!--<div class="one-content-inline-text">管城回族区</div>-->
        <!--<div class="one-progress-ranking one-progress-ranking-bg"  style="width:33%;" title="130"></div>-->
        <!--<div>130</div>-->
        <!--</div>-->
        <!--<div class="one-content-inline col-md-6">-->
        <!--<div class="one-bg-level3">7</div>-->
        <!--<div class="one-content-inline-text">郑东新区</div>-->
        <!--<div class="one-progress-ranking one-progress-ranking-bg"  style="width:25%;" title="120"></div>-->
        <!--<div>120</div>-->
        <!--</div>-->
        <!--<div class="one-content-inline col-md-6">-->
        <!--<div class="one-bg-level3">8</div>-->
        <!--<div class="one-content-inline-text">二七区</div>-->
        <!--<div class="one-progress-ranking one-progress-ranking-bg"  style="width:20%;" title="111"></div>-->
        <!--<div>111</div>-->
        <!--</div>-->
        <!--</div>-->
      </div>
    </div>
  </div>
</section>
